<template>
  <div>
    <!-- https://juejin.cn/post/6928468842377117709 -->
    <h2>获取vuex里面设置的变量</h2>
    <p>名字1: {{ name1 }}</p>
    <p>名字2: {{ $store.state.name }}</p>
    <p>名字3: {{ name }}</p>
    <p>number: {{ number }}</p>
    <hr />
    <h2>获取vuex里面设置的getters,类似计算属性</h2>
    <p>getters1: {{ $store.getters.getMessage }}</p>
    <p>getters2: {{ getMessage }}</p>

    <button @click="handClick">改变number得值</button>
    <button @click="handClick2">改变number得值传参</button>
    <button @click="handClick3">异步改变number得值传参</button>
    <hr />
    <p>store2中的名字：{{ store2name }}</p>
    <p>store2中的getters：{{ store2GetMsg }}</p>
    <p>store2中的number:{{ store2number }}</p>
    <button @click="handClick4">改变store2number得值</button>
    <button @click="handClick5">改变number得值传参</button>
    <button @click="handClick6">异步改变number得值传参</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'page-day36',
  computed: {
    name1() {
      return this.$store.state.name
    },
    // ...mapState({ aliasName: 'name', num: 'number' })

    ...mapState(['name', 'number']),
    // ...mapState('store2', { store2name: 'name' }),
    ...mapState('store2', ['store2name', 'store2number']),
    // ...mapGetters({ message: 'getMessage' })
    ...mapGetters(['getMessage']),
    ...mapGetters('store2', ['store2GetMsg'])
  },
  methods: {
    //  ...mapMutations({ setNumberIsAlias: 'setNumber' }),
    ...mapMutations(['setNumber']),
    ...mapMutations('store2', ['store2setNumber']),
    // ...mapActions({ setNumAlias: 'setNum' }),
    ...mapActions(['setNum']),
    ...mapActions('store2', ['store2setNum']),

    handClick() {
      this.setNumber()
      // this.$store.commit('setNumber')
    },
    handClick2() {
      // this.$store.commit('setNumber', 2)
      this.setNumber(2)
    },
    handClick3() {
      // this.$store.dispatch('setNum', 6)
      this.setNum(7)
    },
    handClick4() {
      // this.$store.commit('store2/store2setNumber')
      this.store2setNumber()
    },
    handClick5() {
      // this.$store.commit('setNumber', 2)
      this.store2setNumber(2)
    },
    handClick6() {
      // this.$store.commit('setNumber', 2)
      this.store2setNum(10)
    }
  }
}
</script>

<style lang="scss" scoped></style>
